<template>
  <div class='login'>
    <div style='height: 5px'></div>
    <div class='container'>
      <img class='background' src='./static/picture/background.jpg' />
      <img class='cloud-bg' src='./static/picture/cloud-bg.png' />
      <img class='cloud-bg2' src='./static/picture/cloud-bg.png' />
      <div class='castle-container'>
        <div class='castle'>
          <div class='brleg'>
            <img class='brfoot' src='./static/picture/brfoot.png' />
            <img class='brbottom' src='./static/picture/brbottom.png' />
          </div>
          <div class='frleg'>
            <img class='frfoot' src='./static/picture/frfoot.png' />
            <img class='frbottom' src='./static/picture/frbottom.png' />
          </div>
          <img class='chimney3' src='./static/picture/chimney3.png' />
          <img class='treehouse' src='./static/picture/treehouse.png' />
          <div class='houses-group'>
            <img class='point6' src='./static/picture/point6.png' />
            <img class='point5' src='./static/picture/point5.png' />
            <img class='point4' src='./static/picture/point4.png' />
            <img class='houses' src='./static/picture/houses.png' />
          </div>
          <img class='chimney2' src='./static/picture/chimney2.png' />
          <img class='chimney1' src='./static/picture/chimney1.png' />
          <img class='wing' src='./static/picture/wing.png' />
          <div class='mound-group'>
            <img class='antenna' src='./static/picture/antenna.png' />
            <img class='point3' src='./static/picture/point3.png' />
            <img class='point2' src='./static/picture/point2.png' />
            <img class='point1' src='./static/picture/point1.png' />
            <img class='mound' src='./static/picture/mound.png' />
          </div>
          <img class='wind' src='./static/picture/wind.png' />
          <img class='cannon' src='./static/picture/cannon.png' />
          <img class='main' src='./static/picture/main.png' />
          <div class='blleg'>
            <div class='blbottom-group'>
              <img class='blfoot' src='./static/picture/flfoot.png' />
              <img class='blbottom' src='./static/picture/flbottom.png' />
            </div>
            <img class='bltop' src='./static/picture/fltop.png' />
          </div>
          <img class='blcover' src='./static/picture/blcover.png' />
          <img class='knob' src='./static/picture/knob.png' />
          <img class='tele' src='./static/picture/tele.png' />
          <img class='telecover' src='./static/picture/telecover.png' />
          <div class='flleg'>
            <div class='flbottom-group'>
              <img class='flfoot' src='./static/picture/flfoot.png' />
              <img class='flbottom' src='./static/picture/flbottom.png' />
            </div>
            <img class='fltop' src='./static/picture/fltop.png' />
          </div>
          <img class='flcover' src='./static/picture/flcover.png' />
        </div>
      </div>

      <img class='foreground' src='./static/picture/foreground.png' />

      <div class='clouds'>
        <img class='cloud-shadow1' src='./static/picture/cloud_shadow-1.png' />
        <img class='cloud-shadow2' src='./static/picture/cloud_shadow-1.png' />
        <img class='cloud-shadow3' src='./static/picture/cloud_shadow-1.png' />
        <img class='cloud1' src='./static/picture/cloud-1.png' />
        <img class='cloud2' src='./static/picture/cloud-1.png' />
        <img class='cloud3' src='./static/picture/cloud-2.png' />
        <img class='cloud4' src='./static/picture/cloud-1.png' />
        <img class='cloud5' src='./static/picture/cloud-2.png' />
      </div>
      <!--    我的代码-->
      <div class='header'>
        <canvas class='illo'></canvas>
      </div>
      <div class='loginPart'>
        <h2>用户登录</h2>
        <el-form ref='loginForm' :model='formLogin' :rules='rules'>
          <!-- <div class="inputElement">
            <el-input v-model="formLogin.username" placeholder="请输入账号"></el-input>
          </div> -->
          <el-form-item prop='username'>
            <div class='divs' style=''>
              <input
                v-model='formLogin.username'
                autocomplete='off'
                class='inputs'
                placeholder='请输入账号'
                type='text' />
              <span></span>
            </div>
          </el-form-item>
          <el-form-item prop='password'>
            <div class='divs' style=''>
              <input
                v-model='formLogin.password'
                autocomplete='off'
                class='inputs'
                placeholder='请输入密码'
                type='password'
                @keyup.enter='submit' />
              <span></span>
            </div>
          </el-form-item>
          <div class='page-login-btn'>
            <el-button plain @click='submit'>login</el-button>
          </div>
          <div style='width: 100%; display: flex; justify-content: center; margin-top: 10px'>
            <el-button class='control-toggle' size='mini' type='text'>鼠标控制</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import localeMixin from '@/locales/mixin.js'
import setting from '@/setting'
import util from '@/libs/util'
import $ from './static/js/jquery-1.10.1.min'
import TweenMax from './static/js/TweenMax.min'
import { getUserMenu } from '@/menu'
import { resetRouter } from '@/router'

export default {
  mixins: [localeMixin],
  data() {
    return {
      timeInterval: null,
      // 快速选择用户
      // 表单
      isLogin: false,
      formLogin: {
        username: '',
        password: '',
        // code: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
  },
  mounted() {
    this.init()
    if (setting.env == 'development') {
      this.formLogin = {
        username: '19912121212',
        password: '123456',
      }
    }

  },
  beforeDestroy() {
  },
  methods: {
    ...mapActions('d2admin/account', ['login']),
    /**
     * @description 提交表单
     */
    async submit() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          //清空动态路由
          await resetRouter()
          let request = {
            userName: this.formLogin.username,
            password: this.formLogin.password,
          }
          //登录
          let res = await this.$api.user.login(request)
          // 设置 cookie 一定要存 uuid 和 token 两个 cookie
          // 整个系统依赖这两个数据进行校验和存储
          // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
          // token 代表用户当前登录状态 建议在网络请求中携带 token
          // 如有必要 token 需要定时更新，默认保存一天
          util.cookies.set('uuid', res.data.userId)
          util.cookies.set('token', res.data.token)
          //获取用户菜单
          await getUserMenu()
          //获取用户信息
          let userInfo = await this.$api.user.find({ userId: res.data.userId })
          // 储存用户信息
          this.login(userInfo.data)
          this.$message.success('登录成功')
          this.$router.replace(this.$route.query.redirect || '/')
        } else {
          // 登录表单校验失败
          this.$message.error('表单校验失败')
        }
      })
    },
    // 获取验证码
    getCode() {
      this.src = setting.appInfo.baseUrl + 'user/code/' + Math.random()
    },
    //初始化加载
    init() {
      var speed = 0.9
      var WIDTH
      var HEIGHT
      var castleWidth
      var scale
      var control = false

      var progress = 0.0

      var _castleCont = $('.castle-container')
      var _castle = $('.castle')

      var resize = function() {
        WIDTH = window.innerWidth
        HEIGHT = window.innerHeight
        scale = WIDTH / 1440

        castleWidth = _castle.width() * scale

        TweenLite.set(_castle, {
          scale: scale * 0.85,
        })
      }
      resize()
      $(window).on('resize', resize)

      var draw = function() {
        requestAnimationFrame(draw)

        progress += 0.0012 * speed
        if (progress > 1) progress = 0
        if (progress < 0) progress = 1

        TweenLite.set(_castleCont, {
          x: (1440 * scale + castleWidth) * -progress + castleWidth / 2,
          y: 900 * scale * -(0.36 + progress * 0.35),
        })
      }

      $(document).on('mousemove', function(e) {
        if (!control) return

        speed = (1 - (e.clientX / WIDTH) * 2) * 2

        tl.timeScale(speed)
        tl2.timeScale(speed)
        tl3.timeScale(speed)
        tl4.timeScale(speed)
        tl5.timeScale(speed)
      })

      $('.control-toggle').on('click', function() {
        control = !control
        $('.container').toggleClass('active')
      })
      //键盘监听回车
      document.onkeydown = function(event_e) {
        if (window.event) {
          event_e = window.event
        }
        var int_keycode = event_e.charCode || event_e.keyCode
        if (int_keycode == '8') {
          //空格
          control = !control

          $('.container').toggleClass('active')
        }
      }
      TweenLite.defaultEase = Power1.easeInOut

      var cloudIntro = function() {
        TweenLite.to($('.cloud1'), 20, {
          x: WIDTH * 2,
          y: 300 * scale,
          opacity: 0.3,
          ease: Linear.easeNone,
          force3D: true,
        })
        TweenLite.to($('.cloud-shadow1'), 20, {
          x: WIDTH * 2 + 50 * scale,
          y: 450 * scale,
          opacity: 0.2,
          ease: Linear.easeNone,
          force3D: true,
        })
        TweenLite.to($('.cloud-shadow2'), 20, {
          x: WIDTH * 2 + 50 * scale,
          y: 450 * scale,
          ease: Linear.easeNone,
          force3D: true,
        })
        TweenLite.to($('.cloud-shadow3'), 20, {
          x: WIDTH * 2 + 50 * scale,
          y: 450 * scale,
          ease: Linear.easeNone,
          force3D: true,
        })
        TweenLite.to($('.cloud2'), 20, {
          x: WIDTH * 2,
          y: 300 * scale,
          opacity: 0.5,
          ease: Linear.easeNone,
          force3D: true,
        })
        TweenLite.to($('.cloud3'), 20, {
          x: WIDTH * 2,
          y: 300 * scale,
          ease: Linear.easeNone,
          force3D: true,
        })
        TweenLite.to($('.cloud4'), 20, {
          x: WIDTH * 2,
          y: 300 * scale,
          ease: Linear.easeNone,
          force3D: true,
        })
        TweenLite.to($('.cloud5'), 20, {
          x: WIDTH * 2,
          y: 300 * scale,
          ease: Linear.easeNone,
          force3D: true,
          onComplete: function() {
            $('.clouds').remove()
          },
        })
      }

      var init = function() {
        TweenLite.to($('.load-gate'), 0.5, {
          opacity: 0,
          onComplete: function() {
            $('.load-gate').remove()
          },
        })
        requestAnimationFrame(draw)
        cloudIntro()
      }
      if (document.readyState == 'complete') {
        init()
      } else {
        $(window).load(init)
      }

      TweenMax.to($('.cloud-bg'), 40, {
        x: WIDTH * 2,
        y: 200 * scale,
        ease: Linear.easeNone,
        repeat: -1,
        force3D: true,
        onRepeat: function() {
          TweenLite.set(this.target[0], {
            y: Math.random() * 200 - 100,
            rotationZ: Math.round(Math.random() * 60) - 30,
            scaleX: Math.random() > 0.5 ? 1 : -1,
          })
        },
      })

      TweenMax.to($('.cloud-bg2'), 40, {
        x: WIDTH * 2,
        y: 200 * scale,
        ease: Linear.easeNone,
        delay: 10,
        repeat: -1,
        force3D: true,
        onRepeat: function() {
          TweenLite.set(this.target[0], {
            y: Math.random() * 200 - 100,
            rotationZ: Math.round(Math.random() * 60) - 30,
            scaleX: Math.random() > 0.5 ? 1 : -1,
          })
        },
      })

      var tl = new TimelineMax({
        repeat: -1,
        onReverseComplete: function() {
          this.seek(tl.duration())
        },
      })

      var _flleg = $('.flleg')
      var _flbottomGroup = $('.flbottom-group')
      var _flfoot = $('.flfoot')

      TweenLite.set(_flleg, {
        rotationZ: 45,
        x: -5,
      })
      TweenLite.set(_flbottomGroup, {
        rotationZ: 5,
      })
      TweenLite.set(_flfoot, {
        rotationZ: -50,
      })

      tl.add([
        TweenLite.to(_flleg, 1.0, {
          rotationZ: -45,
          delay: 0.0,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.2, {
          x: 0,
          delay: 0.0,
          ease: Power1.easeOut,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.55, {
          scaleY: 0.8,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.55, {
          scaleY: 0.8,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.6, {
          rotationZ: 20,
          delay: 0.0,
          ease: Power3.easeIn,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.55, {
          scaleY: 1.5,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.6, {
          rotationZ: 10,
          delay: 0.0,
          ease: Power2.easeIn,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.4, {
          scaleY: 1.0,
          delay: 0.6,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.4, {
          scaleY: 0.7,
          delay: 0.6,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.4, {
          rotationZ: 50,
          delay: 0.6,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.2, {
          rotationZ: 10,
          delay: 0.6,
          ease: Linear.easeNone,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.2, {
          rotationZ: -10,
          delay: 0.8,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.4, {
          scaleY: 1.5,
          delay: 0.6,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.6, {
          x: 20,
          delay: 0.7,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.5, {
          rotationZ: 0,
          delay: 1.0,
          ease: Power1.easeIn,
          force3D: true,
        }),
        TweenLite.to(_flleg, 0.5, {
          scaleY: 0.8,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.5, {
          scaleY: 0.5,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.5, {
          scaleX: 1.8,
          scaleY: 1.7,
          delay: 1.0,
          ease: Power1.easeIn,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.5, {
          rotationZ: 40,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.5, {
          rotationZ: -70,
          delay: 1.0,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.5, {
          rotationZ: 45,
          delay: 1.5,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_flleg, 0.5, {
          scaleY: 1.0,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.5, {
          scaleY: 1.0,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_flbottomGroup, 0.5, {
          rotationZ: 5,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.5, {
          rotationZ: -50,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_flfoot, 0.5, {
          scaleX: 1.0,
          scaleY: 1.0,
          delay: 1.5,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.5, {
          x: -10,
          delay: 1.3,
          force3D: true,
        }),

        TweenLite.to(_flleg, 0.2, {
          x: -5,
          delay: 1.8,
          ease: Power1.easeIn,
          force3D: true,
        }),
      ])

      var tl2 = new TimelineMax({
        repeat: -1,
        delay: 0.7,
        onReverseComplete: function() {
          this.seek(tl2.duration())
        },
      })

      var _blleg = $('.blleg')
      var _blbottomGroup = $('.blbottom-group')
      var _blfoot = $('.blfoot')

      TweenLite.set(_blleg, {
        rotationZ: 45,
        x: -5,
      })
      TweenLite.set(_blbottomGroup, {
        rotationZ: 5,
      })
      TweenLite.set(_blfoot, {
        rotationZ: -50,
      })

      tl2.add([
        TweenLite.to(_blleg, 1.0, {
          rotationZ: -45,
          delay: 0.0,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.2, {
          x: 0,
          delay: 0.0,
          ease: Power1.easeOut,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.55, {
          scaleY: 0.8,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.55, {
          scaleY: 0.8,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.6, {
          rotationZ: 20,
          delay: 0.0,
          ease: Power3.easeIn,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.55, {
          scaleY: 1.5,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.6, {
          rotationZ: 10,
          delay: 0.0,
          ease: Power2.easeIn,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.4, {
          scaleY: 1.0,
          delay: 0.6,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.4, {
          scaleY: 0.7,
          delay: 0.6,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.4, {
          rotationZ: 50,
          delay: 0.6,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.2, {
          rotationZ: 10,
          delay: 0.6,
          ease: Linear.easeNone,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.2, {
          rotationZ: -10,
          delay: 0.8,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.4, {
          scaleY: 1.5,
          delay: 0.6,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.6, {
          x: 20,
          delay: 0.7,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.5, {
          rotationZ: 0,
          delay: 1.0,
          ease: Power1.easeIn,
          force3D: true,
        }),
        TweenLite.to(_blleg, 0.5, {
          scaleY: 0.8,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.5, {
          scaleY: 0.5,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.5, {
          scaleX: 1.8,
          scaleY: 1.7,
          delay: 1.0,
          ease: Power1.easeIn,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.5, {
          rotationZ: 40,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.5, {
          rotationZ: -70,
          delay: 1.0,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.5, {
          rotationZ: 45,
          delay: 1.5,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_blleg, 0.5, {
          scaleY: 1.0,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.5, {
          scaleY: 1.0,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_blbottomGroup, 0.5, {
          rotationZ: 5,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.5, {
          rotationZ: -50,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_blfoot, 0.5, {
          scaleX: 1.0,
          scaleY: 1.0,
          delay: 1.5,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.5, {
          x: -10,
          delay: 1.3,
          force3D: true,
        }),

        TweenLite.to(_blleg, 0.2, {
          x: -5,
          delay: 1.8,
          ease: Power1.easeIn,
          force3D: true,
        }),
      ])

      var tl3 = new TimelineMax({
        repeat: -1,
        delay: 1.0,
        onReverseComplete: function() {
          this.seek(tl3.duration())
        },
      })

      var _frleg = $('.frleg')
      var _frfoot = $('.frfoot')

      TweenLite.set(_frleg, {
        rotationZ: 35,
        x: -40,
      })
      TweenLite.set(_frfoot, {
        rotationZ: -35,
      })

      tl3.add([
        TweenLite.to(_frleg, 0.9, {
          rotationZ: -35,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_frleg, 1.2, {
          x: 40,
          delay: 0.0,
          ease: Power1.easeOut,
          force3D: true,
        }),

        TweenLite.to(_frfoot, 0.9, {
          rotationZ: 35,
          delay: 0.0,
          force3D: true,
        }),

        TweenLite.to(_frleg, 0.4, {
          y: -15,
          delay: 0.0,
          ease: Power1.easeIn,
          force3D: true,
        }),
        TweenLite.to(_frleg, 0.4, {
          y: 0,
          delay: 0.5,
          ease: Power1.easeOut,
          force3D: true,
        }),

        TweenLite.to(_frleg, 1.1, {
          rotationZ: 35,
          delay: 0.9,
          force3D: true,
        }),
        TweenLite.to(_frleg, 0.6, {
          x: -50,
          delay: 1.2,
          force3D: true,
        }),

        TweenLite.to(_frfoot, 0.5, {
          rotationZ: -50,
          delay: 0.9,
          force3D: true,
        }),
        TweenLite.to(_frfoot, 0.3, {
          rotationZ: -35,
          delay: 1.7,
          force3D: true,
        }),

        TweenLite.to(_frleg, 0.6, {
          y: -40,
          delay: 0.9,
          force3D: true,
        }),
        TweenLite.to(_frleg, 0.5, {
          y: 0,
          delay: 1.5,
          force3D: true,
        }),

        TweenLite.to(_frleg, 0.2, {
          x: -40,
          delay: 1.8,
          ease: Power1.easeIn,
          force3D: true,
        }),
      ])

      var tl4 = new TimelineMax({
        repeat: -1,
        delay: 1.7,
        onReverseComplete: function() {
          this.seek(tl4.duration())
        },
      })

      var _brleg = $('.brleg')
      var _brfoot = $('.brfoot')

      TweenLite.set(_brleg, {
        rotationZ: 35,
        x: -40,
      })
      TweenLite.set(_brfoot, {
        rotationZ: -35,
      })

      tl4.add([
        TweenLite.to(_brleg, 0.9, {
          rotationZ: -35,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_brleg, 1.2, {
          x: 40,
          delay: 0.0,
          ease: Power1.easeOut,
          force3D: true,
        }),

        TweenLite.to(_brfoot, 0.9, {
          rotationZ: 35,
          delay: 0.0,
          force3D: true,
        }),

        TweenLite.to(_brleg, 0.4, {
          y: -15,
          delay: 0.0,
          ease: Power1.easeIn,
          force3D: true,
        }),
        TweenLite.to(_brleg, 0.4, {
          y: 0,
          delay: 0.5,
          ease: Power1.easeOut,
          force3D: true,
        }),

        TweenLite.to(_brleg, 1.1, {
          rotationZ: 35,
          delay: 0.9,
          force3D: true,
        }),
        TweenLite.to(_brleg, 0.6, {
          x: -50,
          delay: 1.2,
          force3D: true,
        }),

        TweenLite.to(_brfoot, 0.5, {
          rotationZ: -50,
          delay: 0.9,
          force3D: true,
        }),
        TweenLite.to(_brfoot, 0.3, {
          rotationZ: -35,
          delay: 1.7,
          force3D: true,
        }),

        TweenLite.to(_brleg, 0.6, {
          y: -40,
          delay: 0.9,
          force3D: true,
        }),
        TweenLite.to(_brleg, 0.5, {
          y: 0,
          delay: 1.5,
          force3D: true,
        }),

        TweenLite.to(_brleg, 0.2, {
          x: -40,
          delay: 1.8,
          ease: Power1.easeIn,
          force3D: true,
        }),
      ])

      var tl5 = new TimelineMax({
        repeat: -1,
        delay: 0.0,
        onReverseComplete: function() {
          this.seek(tl5.duration())
        },
      })
      var _castle = $('.castle')
      TweenLite.set(_castle, {
        rotationZ: 9,
      })
      tl5.add([
        TweenLite.to(_castle, 1.0, {
          rotationZ: 7,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_castle, 1.0, {
          rotationZ: 9,
          delay: 1.0,
          force3D: true,
        }),

        TweenLite.to(_castle, 0.5, {
          x: '+=' + 2 * scale,
          y: '-=' + 4 * scale,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_castle, 0.5, {
          x: '-=' + 4 * scale,
          y: '+=' + 4 * scale,
          delay: 0.5,
          force3D: true,
        }),
        TweenLite.to(_castle, 0.5, {
          x: '+=' + 4 * scale,
          y: '-=' + 5 * scale,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_castle, 0.5, {
          x: '-=' + 2 * scale,
          y: '+=' + 5 * scale,
          delay: 1.5,
          force3D: true,
        }),
      ])

      var tl6 = new TimelineMax({
        repeat: -1,
        delay: 0.2,
      })
      var _mound = $('.mound-group')
      TweenLite.set(_mound, {
        rotationZ: 2,
      })
      tl6.add([
        TweenLite.to(_mound, 1.0, {
          rotationZ: -1,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_mound, 1.0, {
          rotationZ: 2,
          delay: 1.0,
          force3D: true,
        }),
      ])

      var tl7 = new TimelineMax({
        repeat: -1,
        delay: 0.8,
      })
      var _wing = $('.wing')
      TweenLite.set(_wing, {
        rotationZ: 2,
      })
      tl7.add([
        TweenLite.to(_wing, 1.0, {
          rotationZ: -1,
          x: -5,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_wing, 1.0, {
          rotationZ: 2,
          x: 0,
          delay: 1.0,
          force3D: true,
        }),
      ])

      var tl8 = new TimelineMax({
        repeat: -1,
        delay: 0.0,
      })
      var _chimney1 = $('.chimney1')
      TweenLite.set(_chimney1, {
        rotationZ: -10,
      })
      tl8.add([
        TweenLite.to(_chimney1, 1.5, {
          rotationZ: 5,
          delay: 0.0,
          force3D: true,
        }),

        TweenLite.to(_chimney1, 1.5, {
          rotationZ: -10,
          delay: 1.5,
          force3D: true,
        }),

        TweenLite.to(_chimney1, 0.5, {
          y: 5,
          x: 0,
          delay: 0.1,
          force3D: true,
        }),
        TweenLite.to(_chimney1, 0.1, {
          y: -15,
          x: 4,
          delay: 0.6,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_chimney1, 0.9, {
          y: 0,
          x: 0,
          delay: 0.7,
          force3D: true,
        }),

        TweenLite.to(_chimney1, 0.5, {
          y: 5,
          x: 0,
          delay: 1.6,
          force3D: true,
        }),
        TweenLite.to(_chimney1, 0.1, {
          y: -15,
          x: 4,
          delay: 2.1,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_chimney1, 0.5, {
          y: 0,
          x: 0,
          delay: 2.2,
          force3D: true,
        }),
      ])

      var tl9 = new TimelineMax({
        repeat: -1,
        delay: 0.5,
      })
      var _chimney2 = $('.chimney2')
      TweenLite.set(_chimney2, {
        rotationZ: -10,
      })
      tl9.add([
        TweenLite.to(_chimney2, 1.5, {
          rotationZ: 5,
          delay: 0.0,
          force3D: true,
        }),

        TweenLite.to(_chimney2, 1.5, {
          rotationZ: -10,
          delay: 1.5,
          force3D: true,
        }),

        TweenLite.to(_chimney2, 0.5, {
          y: 5,
          x: 0,
          delay: 0.1,
          force3D: true,
        }),
        TweenLite.to(_chimney2, 0.1, {
          y: -15,
          x: 4,
          delay: 0.6,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_chimney2, 0.9, {
          y: 0,
          x: 0,
          delay: 0.7,
          force3D: true,
        }),

        TweenLite.to(_chimney2, 0.5, {
          y: 5,
          x: 0,
          delay: 1.6,
          force3D: true,
        }),
        TweenLite.to(_chimney2, 0.1, {
          y: -15,
          x: 4,
          delay: 2.1,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_chimney2, 0.5, {
          y: 0,
          x: 0,
          delay: 2.2,
          force3D: true,
        }),
      ])

      var tl10 = new TimelineMax({
        repeat: -1,
        delay: 1.1,
      })
      var _chimney3 = $('.chimney3')
      TweenLite.set(_chimney3, {
        rotationZ: -10,
      })
      tl10.add([
        TweenLite.to(_chimney3, 1.5, {
          rotationZ: 5,
          delay: 0.0,
          force3D: true,
        }),

        TweenLite.to(_chimney3, 1.5, {
          rotationZ: -10,
          delay: 1.5,
          force3D: true,
        }),

        TweenLite.to(_chimney3, 0.5, {
          y: 5,
          x: 0,
          delay: 0.1,
          force3D: true,
        }),
        TweenLite.to(_chimney3, 0.1, {
          y: -15,
          x: 4,
          delay: 0.6,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_chimney3, 0.9, {
          y: 0,
          x: 0,
          delay: 0.7,
          force3D: true,
        }),

        TweenLite.to(_chimney3, 0.5, {
          y: 5,
          x: 0,
          delay: 1.6,
          force3D: true,
        }),
        TweenLite.to(_chimney3, 0.1, {
          y: -15,
          x: 4,
          delay: 2.1,
          ease: Power1.easeOut,
          force3D: true,
        }),
        TweenLite.to(_chimney3, 0.5, {
          y: 0,
          x: 0,
          delay: 2.2,
          force3D: true,
        }),
      ])

      var tl11 = new TimelineMax({
        repeat: -1,
        delay: 0.5,
      })
      var _houses = $('.houses-group')
      var _point1 = $('.point1')
      var _point2 = $('.point2')
      TweenLite.set(_houses, {
        rotationZ: 2,
        x: -4,
      })
      TweenLite.set(_point1, {
        rotationZ: 2,
        x: -2,
      })
      tl11.add([
        TweenLite.to(_houses, 1.0, {
          rotationZ: -1,
          y: 5,
          x: 0,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_houses, 1.0, {
          rotationZ: 2,
          y: 0,
          x: -4,
          delay: 1.0,
          force3D: true,
        }),

        TweenLite.to(_point1, 1.0, {
          rotationZ: -10,
          y: 2,
          x: 0,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_point1, 1.0, {
          rotationZ: 2,
          y: 0,
          x: -2,
          delay: 1.0,
          force3D: true,
        }),

        TweenLite.to(_point2, 1.0, {
          rotationZ: -5,
          y: 5,
          x: 2,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_point2, 1.0, {
          rotationZ: 0,
          y: 0,
          x: 0,
          delay: 1.0,
          force3D: true,
        }),
      ])

      var tl12 = new TimelineMax({
        repeat: -1,
        delay: 0.45,
      })
      var _point4 = $('.point4')
      var _point5 = $('.point5')
      var _point6 = $('.point6')
      tl12.add([
        TweenLite.to(_point6, 0.3, {
          y: 3,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_point6, 0.1, {
          y: -10,
          x: 4,
          delay: 0.3,
          force3D: true,
        }),
        TweenLite.to(_point6, 0.9, {
          y: 0,
          x: 0,
          delay: 0.4,
          force3D: true,
        }),

        TweenLite.to(_point5, 0.3, {
          y: 3,
          delay: 0.2,
          force3D: true,
        }),
        TweenLite.to(_point5, 0.1, {
          y: -7,
          x: 3,
          delay: 0.5,
          force3D: true,
        }),
        TweenLite.to(_point5, 0.7, {
          y: 0,
          x: 0,
          delay: 0.6,
          force3D: true,
        }),

        TweenLite.to(_point4, 0.3, {
          y: 3,
          delay: 0.4,
          force3D: true,
        }),
        TweenLite.to(_point4, 0.1, {
          y: -10,
          x: 4,
          delay: 0.7,
          force3D: true,
        }),
        TweenLite.to(_point4, 0.7, {
          y: 0,
          x: 0,
          delay: 0.8,
          force3D: true,
        }),
      ])

      var tl13 = new TimelineMax({
        repeat: -1,
        delay: 1.4,
      })
      var _treehouse = $('.treehouse')
      TweenLite.set(_treehouse, {
        rotationZ: -5,
        y: 20,
        x: 4,
      })
      tl13.add([
        TweenLite.to(_treehouse, 1.0, {
          rotationZ: 10,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_treehouse, 1.0, {
          rotationZ: -5,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_treehouse, 1.0, {
          rotationZ: 10,
          delay: 2.0,
          force3D: true,
        }),
        TweenLite.to(_treehouse, 1.0, {
          rotationZ: -5,
          delay: 3.0,
          force3D: true,
        }),

        TweenLite.to(_treehouse, 0.4, {
          y: -5,
          x: -2,
          delay: 0.2,
          force3D: true,
        }),
        TweenLite.to(_treehouse, 3.2, {
          y: 20,
          x: 4,
          delay: 0.8,
          force3D: true,
        }),
      ])

      var tl14 = new TimelineMax({
        repeat: -1,
        delay: 0.65,
      })
      var _wind = $('.wind')
      var _antenna = $('.antenna')
      var _cannon = $('.cannon')
      var _tele = $('.tele')
      var _knob = $('.knob')
      TweenLite.set(_antenna, {
        rotationZ: 10,
        x: 0,
      })
      TweenLite.set(_wind, {
        rotationZ: -10,
        x: 0,
      })
      TweenLite.set(_knob, {
        rotationZ: -20,
        x: 0,
      })
      tl14.add([
        TweenLite.to(_antenna, 1.0, {
          rotationZ: -5,
          x: 0,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_antenna, 1.0, {
          rotationZ: 10,
          x: 5,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_antenna, 1.0, {
          rotationZ: -10,
          x: -5,
          delay: 2.0,
          force3D: true,
        }),
        TweenLite.to(_antenna, 1.0, {
          rotationZ: 10,
          x: 0,
          delay: 3.0,
          force3D: true,
        }),

        TweenLite.to(_wind, 1.1, {
          rotationZ: 5,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_wind, 1.0, {
          rotationZ: -15,
          delay: 1.1,
          force3D: true,
        }),
        TweenLite.to(_wind, 1.0, {
          rotationZ: 10,
          delay: 2.1,
          force3D: true,
        }),
        TweenLite.to(_wind, 0.9, {
          rotationZ: -10,
          delay: 3.1,
          force3D: true,
        }),

        TweenLite.to(_knob, 0.2, {
          rotationZ: 50,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: -20,
          delay: 0.3,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: 45,
          delay: 0.7,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: -25,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: 30,
          delay: 1.5,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: 0,
          delay: 1.9,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: -20,
          delay: 2.2,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.3, {
          rotationZ: 60,
          delay: 2.6,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: -10,
          delay: 3.0,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: 40,
          delay: 3.4,
          force3D: true,
        }),
        TweenLite.to(_knob, 0.2, {
          rotationZ: -20,
          delay: 3.7,
          force3D: true,
        }),

        TweenLite.to(_tele, 1.0, {
          rotationZ: -3,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_tele, 1.0, {
          rotationZ: 2,
          delay: 1.0,
          force3D: true,
        }),
        TweenLite.to(_tele, 1.0, {
          rotationZ: -3,
          delay: 2.0,
          force3D: true,
        }),
        TweenLite.to(_tele, 1.0, {
          rotationZ: 0,
          delay: 3.0,
          force3D: true,
        }),

        TweenLite.to(_tele, 0.25, {
          x: 25,
          y: 4,
          delay: 0.6,
          force3D: true,
        }),
        TweenLite.to(_tele, 2.5, {
          x: 0,
          y: 0,
          delay: 0.9,
          force3D: true,
        }),

        TweenLite.to(_cannon, 0.9, {
          rotationZ: -7,
          delay: 0.0,
          force3D: true,
        }),
        TweenLite.to(_cannon, 0.9, {
          rotationZ: 2,
          delay: 0.9,
          force3D: true,
        }),
        TweenLite.to(_cannon, 1.1, {
          rotationZ: -5,
          delay: 1.8,
          force3D: true,
        }),
        TweenLite.to(_cannon, 1.1, {
          rotationZ: 0,
          delay: 2.9,
          force3D: true,
        }),

        TweenLite.to(_cannon, 0.25, {
          x: 30,
          y: 4,
          delay: 0.85,
          force3D: true,
        }),
        TweenLite.to(_cannon, 2.6, {
          x: 0,
          y: 0,
          delay: 1.4,
          force3D: true,
        }),
      ])
    },
  },
}
</script>

<style lang='scss' scoped>
.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 75%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  background: rgba(0, 0, 0, 0.3);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginPart h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}

.loginPart .inputbox {
  position: relative;
}

.loginPart .inputElement input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  /*outline用于绘制元素周围的线
    outline：none在这里用途是将输入框的边框的线条使其消失*/
  background: transparent;
  /*背景颜色为透明*/
}

.divs {
  position: relative;
}

.inputs {
  width: 100%;
  padding: 20px 0;
  color: white;
  font-size: inherit;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom-color: hsla(185, 100%, 62%, 0.2);
}

.inputs:focus {
  outline: none;
}

.inputs::placeholder {
  color: hsla(0, 0%, 100%, 0.6);
}

.divs span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #3cefff;
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.inputs:focus ~ span {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.page-login-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  button {
    z-index: 1;
    font-size: inherit;
    font-family: inherit;
    color: #fff;
    width: 150px;
    padding: 0.5em 1em;
    outline: none;
    border: none;
    background-color: #00b4f4;
    border-radius: 5px;
  }

  button:hover {
    cursor: pointer;

    animation: jelly 0.5s;
  }
}

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

//别的代码

.login {
  height: 100vh;
  margin: 0;
  background: #2294b3;
  overflow: hidden;
}

.container {
  padding-top: 62.5%;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.container.active {
  cursor: ew-resize;
}

img,
.mound-group,
.houses-group,
.flbottom-group,
.blbottom-group,
.brleg,
.frleg,
.blleg,
.flleg {
  position: absolute;
  transform-style: preserve-3d;
}

.castle-container {
  position: absolute;
  left: 100%;
  bottom: 0%;
}

.castle {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 750px;
  perspective: 1000px;
  transform-origin: 50% 70%;
  transform: translate(-50%, -70%) rotateZ(9deg);
}

.brleg {
  left: 400px;
  top: 625px;
  transform-origin: 10px -10px;
  transform: rotateZ(0deg);
}

.brfoot {
  left: -18px;
  top: 82px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}

.brbottom {
}

.frleg {
  left: 240px;
  top: 653px;
  transform-origin: 8px -10px;
  transform: rotateZ(0deg);
}

.frfoot {
  left: -18px;
  top: 51px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}

.frbottom {
}

.chimney3 {
  left: 400px;
  top: 30px;
  transform-origin: 45% 120%;
  transform: rotateZ(0deg);
}

.houses-group {
  left: 305px;
  top: 130px;
  transform-origin: -50px 300px;
  transform: rotateZ(1deg);
}

.point6 {
  left: 84px;
  top: 19px;
  transform-origin: 40% 120%;
  transform: rotateZ(0deg);
}

.point5 {
  left: 70px;
  top: -23px;
  transform-origin: -40% 200%;
  transform: rotateZ(0deg);
}

.point4 {
  left: 40px;
  top: -17px;
  transform-origin: 0% 100%;
  transform: rotateZ(0deg);
}

.houses {
}

.treehouse {
  left: 220px;
  top: 10px;
  transform-origin: 50% 150%;
  transform: rotateZ(0deg);
}

.chimney2 {
  left: 430px;
  top: 120px;
  transform-origin: 0% 90%;
  transform: rotateZ(0deg);
}

.chimney1 {
  left: 420px;
  top: 90px;
  transform-origin: -10% 90%;
  transform: rotateZ(0deg);
}

.wing {
  left: 420px;
  top: 370px;
  transform-origin: 0% 50%;
  transform: rotateZ(0deg);
}

.antenna {
  left: -100px;
  top: 90px;
  transform-origin: 100% 65%;
  transform: rotateZ(0deg);
}

.mound-group {
  left: 115px;
  top: 110px;
  transform-origin: 110px 220px;
  transform: rotateZ(0deg);
}

.point3 {
  left: 125px;
  top: -13px;
  transform-origin: 50% 400%;
  transform: rotateZ(0deg);
}

.point2 {
  left: 50px;
  top: -22px;
  transform-origin: 120% 200%;
  transform: rotateZ(0deg);
}

.point1 {
  left: 4px;
  top: 55px;
  transform-origin: 150% 150%;
  transform: rotateZ(0deg);
}

.mound {
}

.wind {
  left: 400px;
  top: 260px;
  transform-origin: 0% 90%;
  transform: rotateZ(0deg);
}

.cannon {
  left: 30px;
  top: 460px;
  transform-origin: 100% 60%;
  transform: rotateZ(0deg);
}

.main {
  left: 80px;
  top: 230px;
  transform-origin: 50% 50%;
  transform: rotateZ(0deg);
}

.blleg {
  left: 410px;
  top: 615px;
  transform-origin: 10px 15px;
  transform: rotateZ(0deg);
}

.blbottom-group {
  left: 0px;
  top: 60px;
  transform-origin: 10px 0px;
  transform: rotateZ(0deg);
}

.blfoot {
  left: -19px;
  top: 68px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}

.blbottom {
}

.bltop {
}

.blcover {
  left: 360px;
  top: 573px;
}

.knob {
  left: 214px;
  top: 524px;
  transform-origin: 30% 63%;
  transform: rotateZ(0deg);
}

.tele {
  left: 90px;
  top: 430px;
  transform-origin: 90% 50%;
  transform: rotateZ(0deg);
}

.telecover {
  left: 161px;
  top: 399px;
}

.flleg {
  left: 250px;
  top: 615px;
  transform-origin: 10px 15px;
  transform: rotateZ(0deg);
}

.flbottom-group {
  left: 0px;
  top: 60px;
  transform-origin: 10px 0px;
  transform: rotateZ(0deg);
}

.flfoot {
  left: -19px;
  top: 68px;
  transform-origin: 56% 44%;
  transform: rotateZ(0deg);
}

.flbottom {
}

.fltop {
}

.flcover {
  left: 244px;
  top: 567px;
}

.foreground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.background {
  position: absolute;
  bottom: 21.5%;
  left: 0;
  width: 100%;
}

.cloud-bg {
  bottom: 17%;
  width: 80%;
  right: 100%;
}

.cloud-bg2 {
  bottom: 17%;
  width: 80%;
  right: 100%;
}

.cloud-shadow1 {
  bottom: 43%;
  right: 100%;
  width: 80%;
  transform: rotate(5deg);
}

.cloud1 {
  bottom: 30%;
  right: 100%;
  width: 80%;
}

.cloud-shadow2 {
  bottom: 12%;
  left: 36%;
  width: 80%;
  transform: rotate(5deg);
}

.cloud-shadow3 {
  bottom: 31%;
  left: -30%;
  width: 80%;
  transform: rotate(5deg);
}

.cloud2 {
  bottom: 46%;
  left: -29%;
  width: 80%;
}

.cloud3 {
  bottom: 38%;
  left: 17%;
  width: 80%;
}

.cloud4 {
  bottom: 18%;
  left: -18%;
  width: 80%;
}

.cloud5 {
  bottom: 8%;
  left: 40%;
  width: 80%;
}

.load-gate {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 20px;
}
</style>
